﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <link href="js/v5.1.3-dist/ol.css" rel="stylesheet" type="text/css" />
    <script src="js/v5.1.3-dist/ol.js" type="text/javascript"></script>
    <link href="css/example.css" rel="stylesheet" />
    <script src="js/InitMap.js"></script>
    <script src="js/jquery.js"></script>
    <script type="text/javascript">
        window.onload = function () {
            var map = initMap();


            $("#btnZoomToLevel").bind("click", function () {
                var view = map.getView();
                var zoom = document.getElementById("level").value;
                //判断非负整数
                if (zoom % 1 == 0 && zoom >= 0) {
                    if (zoom <= 28) {
                        view.setZoom(zoom);
                    } else {
                        alert("最大显示级数为28,请重新输入！");
                        return;
                    }
                } else {
                    alert("请输入非负整数！");
                    return;
                }
            });

            map.on("moveend", function () {
                document.getElementById("level").value = map.getView().getZoom();
            });
        }


    </script>
</head>
<body>
    <div class="ToolLib">
        <span class="style2">
            <label>
                <strong>级数:</strong>
            </label>
        </span>
        <input id="level" class="text" type="text" value="4" />
        <input type="button" class="ButtonLib" id="btnZoomToLevel" value="设置地图显示级数" />
    </div>

    <div id="map">
    </div>
</body>
</html>
